<template>
	<view>
		<form class="form" @submit="submitForm">
			<!-- <view class="form"> -->
			<view class="cu-form-group item avatar">
				<view class="title">用户头像</view>
				<image class="cu-avatar  " v-show="userInfo.img" :src="userInfo.img" mode="">
				</image>
				<image class="cu-avatar  " v-show="!userInfo.img" @click="chooseImage" src="/static/images/userdef.png"
					mode=""></image>
			</view>

			<view class="cu-form-group item">
				<view class="title">联系人</view>
				<input class="inp" placeholder="请输入联系人" v-model="userInfo.user_name" name="user_name"></input>
				<text class='cuIcon-right'></text>
			</view>
			<view class="cu-form-group item">
				<view class="title">手机号：</view>
				<input class="inp" placeholder="请输入手机号：" v-model="userInfo.telephone" type="tel"
					name="telephone"></input>
				<text class='cuIcon-right'></text>
			</view>
			<view class="cu-form-group item">
				<view class="title">微信号：</view>
				<input class="inp" placeholder="请输入微信号" v-model="userInfo.wechat_id" name="wechat_id"></input>
				<text class='cuIcon-right'></text>
			</view>
			<view class="cu-form-group item">
				<view class="title">邮箱：</view>
				<input class="inp" placeholder="请输入邮箱" v-model="userInfo.email" name="email"></input>
				<text class='cuIcon-right'></text>
			</view>
			<view class="cu-form-group item">
				<view class="title">核心优势：</view>
				<input class="inp" placeholder="请输入核心优势" v-model="userInfo.advantage" name="advantage"></input>
				<text class='cuIcon-right'></text>
			</view>
			<view class="cu-form-group item">
				<view class="title">业务介绍：</view>
				<input class="inp" placeholder="请输入业务介绍" v-model="userInfo.business" name="business"></input>
				<text class='cuIcon-right'></text>
			</view>
			<view class="cu-form-group item">
				<view class="title">公司/组织/个人简介：</view>
				<input class="inp" placeholder="请输入公司/组织/个人简介" v-model="userInfo.desc" name="desc"></input>
				<text class='cuIcon-right'></text>
			</view>

			<!-- </view> -->
			<view class="opt centerSubElements">
				<button form-type="submit" class="btn btnview">下一步</button>
			</view>
		</form>
		<cut-component @callback="callback" ref="cut"></cut-component>
	</view>
</template>

<script>
	import cutComponent from '@/components/my/cut-component/cut-component.vue'
	import {
		checkPhone,
		emailReg,
		checksStr
	} from "@/utils/regular.js"
	import {
		chous
	} from "../mixins.js"
	export default {
		name: "personalData",
		mixins: [chous],
		components: {
			cutComponent
		},
		watch: {
			fromData(newVal) {
				this.userInfo = newVal
			}
		},
		data() {
			return {
				userInfo: {
					img: null,
					user_name: null,
					telephone: null,
					wechat_id: null,
					email: null,
					advantage: null,
					business: null,
					desc: null,
				},
			};
		},
		mounted() {

		},
		methods: {
			async callback(e) {
				const res = await this.$api.UploadImage({
					filePath: e
				})
				this.userInfo.img = JSON.parse(res).data.uri

			},
			async submitForm(e) {
				const data = Object.assign({}, this.userInfo, e.detail.value)
				if (!this.check()) return
				if (JSON.stringify(this.fromData)!==JSON.stringify(data)) {
					if (!data.id) {
						const res = await this.$api.CardBusinessAdd(data)
					} else {
						const res = await this.$api.CardBusinessEdit(data)
					}
					uni.setStorageSync("userInfo", data)
				}
				this.$emit('next', 1)
			},
			// 校验
			check() {
				const userInfo=this.userInfo
				if (!checksStr(userInfo.img,'请上传头像')) return false;
				if (!checksStr(userInfo.user_name,'请输入联系人')) return false;
				if (!checkPhone(userInfo.telephone)) return false;
				if (!checksStr(userInfo.wechat_id,'请输入微信号')) return false;
				if (!emailReg(userInfo.email)) return false;
				if (!checksStr(userInfo.advantage,'请输入核心优势')) return false;
				if (!checksStr(userInfo.business,'请输入业务介绍')) return false;
				if (!checksStr(userInfo.desc,'请输入公司/组织/个人简介')) return false;
				return true

			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 100%;
		display: block;
		background-color: $content-bg-colcor;
		overflow: hidden;
		margin-top: 60rpx;
		.avatar {
			display: flex;
			justify-content: space-between;
			padding-bottom: $submargin-width;
			.title {}
			.cu-avatar {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}

	.item {
		width: $connet-width ;
		margin: 0 auto;
		border-bottom: 1rpx solid #DDDDDD;
		.title {
			font-size: $uni-font-size-12;
			margin: 30rpx 0 20rpx;
		}
		.inp {
			font-size: $uni-font-size-17;
			width: 100%;
			margin-bottom: 30rpx;
			padding: 0;
		}
		.cuIcon-right {
			color: $unselected;
		}
	}
	.changePassword {
		margin-top: $submargin-width;
		.item {}
	}
	.opt {
		position: fixed;
		bottom: calc(var(--window-bottom) + 20rpx);
		left: 0;
		width: 100%;
		.btn {
			border-radius: 40rpx;
			width: 690rpx;
			height: 80rpx;
			font-size: $uni-font-size-15;
			line-height: 80rpx;
		}
	}
</style>